<template>
	<view>
		<!-- 个人信息 -->
		<view class="homepage-back">
			<view class="doctor-int">
				<image src="../../../static/logo.png" mode="aspectFill"></image>
				<view class="">
					<view class="doctor-int name-padd">
						<text class="do-name">111</text>
						<text>222</text>
					</view>
					<text>3333</text>
				</view>
			</view>
			<text class="good-at">444</text>
		</view>

		<!-- 选择时间 -->
		<view class="homepage-back">
			<text class="res-Title">预约挂号</text>
			<view class="table">
				<view class="table-left">
					<text>日期</text>
					<text>上午</text>
					<text>下午</text>
				</view>
				<u-scroll-list class="scroll-view-H" :indicator="false">
					<view class="TR">
						<view class="">
							<text class="table-day">111</text>
							<text>222</text>
						</view>
						<!-- 上午 -->
						<view class="" @click="show = true">预约</view>
						<!-- 下午 -->
						<view class="" @click="show = true">预约</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 弹框 -->
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="pop-box">
				<view class="title">请选择预约时段</view>
				<view class="table-time">
					<view class="Have">9:00-10:00</view>
					<view>9:00-10:00</view>
				</view>
				<view class="title">选择成员</view>
				<view class="change-people">
					<image src="../../../static/logo.png" mode=""></image>
					<text @click="goChangeMember">选择成员 ></text>
				</view>
				<view class="pop-btn"><u-button type="primary" text="提交预约"></u-button></view>
			</view>
		</u-popup>

		<!-- 提示 -->
		<view class="prompt">
			<text>重要提示</text>
			<text>1.本次预约就铮当天木可取消预约，如需取蹭请在就诊前一天的24:00之前操作，累计取消或爽约三次可能会被列入医院黑名单，请按需预约。</text>
			<text>2.预约挂号暂不支持医保支付，若本次挂号使用手机在线支付，就诊过程中的门诊检验检直，处方费用可能不支持医保支付。</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 底部弹框的显示
			show: false
		};
	},
	methods: {
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		// 选择成员
		goChangeMember(){
						  uni.navigateTo({
						  	url:'../../component/myPatient/managePatient/managePatient'
						  })
		}
	}
};
</script>

<style lang="less">
page {
	background: linear-gradient(to bottom, #e8f4ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}
.homepage-back {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
}
/* 顶部 */
.doctor-int image {
	display: block;
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
}
.doctor-int {
	display: flex;
	align-items: center;
}
.do-name {
	font-size: 35rpx;
	font-weight: bold;
	padding-right: 10rpx;
}
.name-padd {
	padding-bottom: 20rpx;
}
.good-at {
	line-height: 1.5;
	padding-top: 20rpx;
}
/* 预约挂号 */
.res-Title {
	display: block;
	padding-bottom: 20rpx;
	font-size: 35rpx;
}
.table {
	display: flex;
}
.table-left text {
	display: block;
	height: 140rpx;
	line-height: 140rpx;
	border: 0.5rpx solid #dfdfdf;
}
.table-left {
	width: 100rpx;
	text-align: center;
}
.TR {
	display: inline-block;
	text-align: center;
	white-space: pre-wrap;
	height: fit-content;
}
.TR text {
	display: block;
}
.TR view {
	width: 130rpx;
	height: 140rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 0.5rpx solid #dfdfdf;
}
.table-day {
	color: #8c8c8c;
}
/* 禁用点击 */
.Disa {
	pointer-events: none;
}
/* 有号 */
.Have {
	background-color: #179bff;
	color: #ffffff !important;
}
/* 提示 */
.prompt text {
	display: block;
	padding: 10rpx 20rpx;
	font-size: 26rpx;
	color: #636468;
	line-height: 1.5;
}
// 底部弹框
.pop-box {
	display: flex;
	justify-content: space-around;
	height: 550rpx;
	flex-direction: column;
	align-items: center;
	.table-time {
		width: 100%;
		display: flex;
		justify-content: space-around;
		view {
			padding: 16rpx;
			border: 1rpx solid #dcdcdc;
			color: #7091c4;
		}
	}
	.change-people {
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		text {
			color: #7fa2c8;
		}
	}
	.pop-btn {
		width: 80%;
	}
}
</style>
